<template>

	<view class="container">
		<image src="../../../static/unpaid/背景.png" class="background-image"></image>
		<view>
			<view class="nihi"></view>
			<view class="botton">
				<view class="tt">
					<view class="circle">
						<image src="../../../static/unpaid/头像.png" style="width: 113rpx; height: 113rpx;"></image>
					</view>
				</view>

				<view class="content">
					<view class="word2">武汉天幕达生鲜供应公司</view>
				</view>
				<view class="content1" @click="xlb(0)">
					<view style="width: 200rpx;" class="word"> 订单管理</view>
					<view style="width: 280rpx;"></view>
					<image src="../../../static/unpaid/箭头_列表向右_o.png" class="xx"></image>
				</view>
				<view class="content1" @click="huankuan()">
					<view style="width: 200rpx;" class="word"> 账单还款管理</view>
					<view style="width: 280rpx;"></view>
					<image src="../../../static/unpaid/箭头_列表向右_o.png" class="xx"></image>
				</view>
			<!-- 	<view class="content1">
					<view style="width: 200rpx;" class="word">退出登录</view>
					<view style="width: 280rpx;"></view>
					<image src="../../../static/unpaid/箭头_列表向右_o.png" class="xx"></image>
				</view> -->
			</view>

		</view>
		<view class="vv"></view>
		<tabBar></tabBar>
	</view>
	 <tabBar></tabBar>
</template>

<script setup>
	import { ref,onMounted } from "vue";
	import {
		useTokenStore
	} from '../../../store/token';
	onMounted((oid) => {
		console.log("pinia中的用户对象")
		console.log(useTokenStore().token)
	});	
	
	const xlb = (index) => {
		uni.navigateTo({
			url:"/pages/businessman/unpaid/unpaid"
		})
	}
	
	const huankuan = ()=> {
		uni.navigateTo({
			url:"/pages/supplier/djshenhe/shenhehuankuan"
		})
		
	}
	
</script>

<style lang="scss" scoped>
	.container {
		position: relative;
		/* 确保容器充满整个屏幕或父容器 */
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100%;
	}

	.background-image {

		position: absolute;

		width: 750rpx;
		height: 540rpx;
		z-index: -1;
	}

	.content {
		width: 688rpx;
		height: 220rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 27rpx 0rpx rgba(153, 153, 153, 0.2);
		z-index: 1;
		margin-bottom: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

	}

	.content1 {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		width: 688rpx;
		height: 67rpx;
		background: #FFFFFF;

		z-index: 1;
		margin-bottom: 30rpx;

	}

	.botton {}

	.nihi {
		height: 350rpx;

	}

	.xx {
		width: 30rpx;
		height: 40rpx;


	}

	.circle {
		width: 113rpx;
		/* 宽度和高度相等，形成正方形 */
		height: 113rpx;
		/* 同上 */
		border-radius: 50%;
		/* 将正方形变成圆形 */
		display: flex;
		/* 使用flex布局，方便后续添加内容（可选） */
		align-items: center;
		/* 垂直居中（可选） */
		justify-content: center;
		/* 水平居中（可选） */
		z-index: 2;
	}

	.tt {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: -50rpx;
	}

	.word {
		width: 103rpx;
		height: 25rpx;
		font-family: SourceHanSansSC;
		font-weight: 500;
		font-size: 27rpx;
		color: #666666;
		line-height: 37rpx;
	}

	.word1 {
		border: 1px solid red;
		width: 389rpx;
		height: 25rpx;
		font-family: SourceHanSansSC;
		font-weight: 500;
		font-size: 27rpx;
		color: #666666;
		line-height: 37rpx;
		margin-top: 20rpx;
	}

	.word2 {
		width: 400rpx;
		height: 31rpx;
		font-family: SourceHanSansSC;
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
		line-height: 37rpx;

	}

	.vv {
		width: 750rpx;
		height: 166rpx;
		background: #FFFFFF;
		margin-top: 230rpx;
	}
</style>